<template>
    <div style="overflow: auto;">
        <div>
            <span style="display: inline-block; font-size: 14px;">{{$t('overdueData.channelAuth')}}：</span>
            <el-select v-model='listQuery.channel' size='small'>
                <el-option
                v-for='item in business'
                :key='item.channel'
                :label='item.org_name'
                :value='item.channel'>
                </el-option>
            </el-select>
            <el-button type="primary" size="small" @click="search">{{$t('btn.query')}}</el-button>
        </div>
        <line-chart :data-all="dataAll"></line-chart>
    </div>
</template>

<script>
import { getChannels } from "api/customQuery/index";
import { overdueRateData } from "api/synManager/overdueData";
export default {
  data() {
    return {
      business: [],
      listQuery: {
        flag: "day",
        channel: ""
      },
      dataAll: []
    };
  },
  components: {
    "line-chart": () => import("./lineChart")
  },
  created() {
    this.getChannel();
    setTimeout(() => {
      this.getData();
    }, 500);
  },
  methods: {
    // 渠道下拉
    getChannel() {
      getChannels().then(response => {
        this.business = response.data;
        this.listQuery.channel = response.data[0].channel;
      });
    },
    getData() {
      overdueRateData(this.listQuery).then(res => {
        if (res.status === 200) {
          this.dataAll = res.data[0].overdueRateDataDetails;
        }
      });
    },
    search() {
      this.getData();
    }
  }
};
</script>

<style scoped>
</style>